import { Component } from 'react';
import { NavBar, Toast } from 'react-vant';
import WithRouter from '../../router/WithRouter';
import { Field, Area, Checkbox, Button } from 'react-vant';
import './index.less'
import { Arrow } from '@react-vant/icons';
import { areaList } from '@vant/area-data'
// console.log(areaList)
import { addAddress,getAddressInfo} from '@/Api/user'
class Add extends Component {
    state = {
        cityList: [],
        name: "",
        phone: "",
        detail: "",
        isDefault:false,
        province:"",
        city:"",
        district:"",
        id:0
    }
    render() {
        let { cityList, name, phone, detail,isDefault,id} = this.state;
        return (
            <div id='add'>
                <NavBar
                    title={id===0?'添加收货地址':'编辑收货地址'}
                    onClickLeft={() => {
                        this.props.router.navigate(-1)
                    }}
                />
                <div className='filed'>
                    <div>
                        <Field
                            label="姓名"
                            placeholder="请输入姓名"
                            value={name}
                            onChange={(val) => {
                                this.setState({
                                    name: val
                                })
                            }}
                        />
                        <Field
                            label="联系电话"
                            placeholder="请输入联系电话"
                            value={phone}
                            onChange={(val) => {
                                this.setState({
                                    phone: val
                                })
                            }}
                        />
                        <Area
                            popup={{
                                round: true,
                            }}
                            value={cityList}
                            title='选择地区'
                            areaList={areaList}
                            onConfirm={(e,option) => {
                                this.setState({
                                    cityList: e,
                                    province:option[0].text,
                                    city:option[1].text,
                                    district:option[2].text
                                })
                            }}
                        >
                            {(_, selectRows, actions) => {
                                return (
                                    <Field
                                        label='所在地区'
                                        placeholder='省,市区'
                                        value={selectRows.map(row => row?.text).join(',')}
                                        onClick={() => actions.open()}
                                        rightIcon={<Arrow />}
                                    />
                                )
                            }}
                        </Area>
                        <Field
                            label="详细地址"
                            placeholder="请输入详细地址"
                            value={detail}
                            onChange={(val) => {
                                this.setState({
                                    detail: val
                                })
                            }}
                        />
                    </div>

                </div>
                <div className='defaultAddress'>
                    <Checkbox checked={isDefault} onChange={(val)=>{
                        this.setState({
                            isDefault:val
                        })
                    }}>
                        设置为默认收货地址
                    </Checkbox>

                </div>
                <div className='mybtn'>
                    <Button block type="danger" round onClick={() => this.add()}>{id===0?'确认添加':'确认修改'}</Button>
                </div>
            </div>
        )
    }
   async add() {
    // if(this.state.id!==0){
    //     // 修改地址
    //     this.update();
    //     return
    // }
    // // 添加收货地址
    let {province,city,district,detail,isDefault,phone,name,id} = this.state;
     let data = {
        address:{
            province,
            city,
            district,
            cityId:26779
        },
        detail,
        id:id,
        isDefault,
        phone,
        realName:name
     }
     let res = await addAddress(data);
     console.log(res)
     if(res.data.code ===200){
        Toast.success("操作成功")
        this.props.router.navigate(-1)
     }else{
        Toast(res.data.message)
     }
    }
   async componentDidMount(){
        // 获取路径传递得参数 收货地址id;
        let [searchParams] = this.props.router.SearchParams;
        let id = searchParams.get('addressId');
        if(!id){
            id=0
        }
        this.setState({
            id:id
        })
        if(id!==0){
            // 获取当前收货地址详情
            let res = await getAddressInfo(id);
            let {realName,phone,detail,isDefault,province,city,district} = res.data.data;
            // console.log(areaList)
            // 处理城市数据 根据 省市区获取省市区所对应得id;
            let {province_list,city_list,county_list} = areaList;
            let list = [];
            // 遍历对象 key表示对象得属性名
            for(let key in province_list){
                if(province_list[key]===province){
                    list.push(key.toString())
                }
            }
            for(let key in city_list){
                if(city_list[key]===city){
                    list.push(key.toString())
                }
            }
            for(let key in county_list){
                if(county_list[key]===district){
                    list.push(key.toString())
                }
            }
            this.setState({
                name:realName,
                phone,
                detail,
                isDefault,
                cityList:list
            })
        }
    }
}
export default WithRouter(Add);